/* eslint-disable @next/next/no-img-element */
import { Card, CardContent } from "@/components/ui/card";

interface AnalysisItemProps {
  image: string;
  title: string;
  text: string;
}

export const AnalysisItem = ({ image, title, text }: AnalysisItemProps) => {
  return (
    <Card className="flex flex-col gap-6 p-4 items-start">
      {/* 左侧：图片 + 标题 */}
      <div className="flex flex-col items-center w-full relative">
        <img
          src={`data:image/png;base64,${image}`}
          alt={title}
          className="w-full h-auto rounded-xl border object-cover"
          loading="lazy"
        />
        <div className="text-sm text-muted-foreground text-center mt-2">
          {title}
        </div>
      </div>

      {/* 右侧：描述文本 */}
      <CardContent className="p-0 text-red-600 text-base leading-relaxed break-words">
        {text}
      </CardContent>
    </Card>
  );
};
